<script lang="ts" setup>
import AddPage from './components/addPage.vue' // 引入添加页面组件
import moment from 'moment'
import Pagination from '../../components/pagination/index.vue' // 引入分页组件
import { Delete, Edit } from '@element-plus/icons-vue'
import { ref, reactive, onBeforeMount } from 'vue'
import { getRouterList, deleteRouter } from '@/api/router'

const editDrawer = ref(false) // 控制编辑抽屉的显示
const editPage = ref({}) // 编辑的用户

// 打开弹窗
const openEditDrawer = (editObject: any) => {
  editPage.value = editObject
  editDrawer.value = true
}
// 关闭
const closeEditDrawer = (isReadonly: boolean) => {
  // 若需要更新数据则掉接口
  if (isReadonly) {
    getRouterListFun({ pageIndex: PaginationConfig.currentPage - 0, pageSize: 10 })
  }
  editDrawer.value = false
}

// 添加页面
const addPage = () => {
  openEditDrawer({})
}

// 删除角色
const deleteRole = async (id: number) => {
  const res = await deleteRouter(id)
  if (res.errcode === 0) {
    ElMessage.success('删除成功')
    getRouterListFun({ pageIndex: PaginationConfig.currentPage - 0, pageSize: 10 })
  } else {
    ElMessage.error(res.msg)
  }
}

// 表格数据
const tableData = ref([])
const loading = ref(false)

// 分页
const PaginationConfig = reactive({
  currentPage: ref(1),
  total: ref(10)
})
// 分页改变
const currentChange = (page: number) => {
  PaginationConfig.currentPage = page
}

// 初始化加载
onBeforeMount(async () => {
  getRouterListFun({ pageIndex: PaginationConfig.currentPage - 0, pageSize: 10 })
})

// 获取数据
const getRouterListFun = async (params: any) => {
  loading.value = true
  const res = await getRouterList(params)
  loading.value = false
  tableData.value = res.data.rows
  PaginationConfig.total = res.data.count - 0
}
</script>
<!-- 页面配置 -->
<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>页面管理</span>
          <el-button class="button" type="text" @click="addPage">添加页面</el-button>
        </div>
      </template>
      <el-table :data="tableData" border style="width: 100%" size="small" v-loading="loading">
        <el-table-column prop="router_title" label="标题" />
        <el-table-column prop="router_name" label="名称" />
        <el-table-column prop="router_path" label="路径" />
        <el-table-column prop="router_component" label="模块" />
        <el-table-column prop="router_icon" label="图标" />
        <el-table-column prop="router_roles" label="权限">
          <template v-slot="scope">
            <el-tag
              v-for="item in typeof scope.row.router_roles === 'string' ? JSON.parse(scope.row.router_roles) : []"
              :key="item"
              :type="item === '管理员' ? 'success' : 'warning'"
              >{{ item }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="router_alwaysShow" label="显示导航">
          <template v-slot="scope">
            <el-tag type="success" v-if="scope.row.router_alwaysShow">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="router_hidden" label="是否隐藏">
          <template v-slot="scope">
            <el-tag type="success" v-if="scope.row.router_hidden">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间">
          <template v-slot="scope">
            {{ moment(scope.row.createdAt).format('YYYY-MM-DD HH:mm') }}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" size="small" :icon="Edit" circle @click="openEditDrawer(scope.row)" />
            <el-popconfirm title="确定要删除吗？" @confirm="deleteRole(scope.row.id)">
              <template #reference>
                <el-button type="danger" size="small" :icon="Delete" circle />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        fixed="right"
        @currentChange="currentChange"
        :currentPage="PaginationConfig.currentPage"
        :total="PaginationConfig.total"
      />
    </el-card>
    <AddPage :editPage="editPage" :visibleDrawer="editDrawer" @closeDrawer="closeEditDrawer" />
  </div>
</template>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>
